<template>
  <div class="process_template">
    <one-title title="工序记录模板" @refreshData="refresh">
      <div class="mes_btn">
        <el-button @click="showDeleteDialog">
          <i class="iconfont icon-btn_delete"></i>
          删除
        </el-button>
        <el-button @click="handleEdit">
          <i class="iconfont icon-btn_edit"></i>
          修改
        </el-button>
        <el-button type="success" @click="handleAdd">
          <i class="iconfont icon-btn_addnew"></i>
          新增
        </el-button>
      </div>
    </one-title>
    <mes-search :searchList="searchList"
                ref="mesSearch"
                :searchResult="searchResult"
                @searchInfo="search"
    ></mes-search>
    <div class="table_container">
      <el-table
        ref="tableNode"
        v-loading="isLoading"
        :data="listData.list"
        @sort-change="handleSortChange"
        @selection-change="handleSelectionChange"
        border
        stripe
        tooltip-effect="dark">
        <el-table-column
          width="40"
          type="selection"
          align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="模板名称"
          show-overflow-tooltip
          min-width="150"
          sortable="custom"
          align="center">
          <template slot-scope="scope">
            <router-link :to="{path: 'processTemplateDetail', query: {id: scope.row.id}}"
                         class="jump_item">{{scope.row.name}}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="materialName"
          label="物料名称"
          min-width="100"
          show-overflow-tooltip
          align="center">
        </el-table-column>
        <el-table-column
          prop="workstageName"
          label="工序名称"
          min-width="100"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="sort"
          label="工序序号"
          min-width="80"
          show-overflow-tooltip
          align="center">
        </el-table-column>
        <el-table-column
          label="显示上下限"
          min-width="95"
          show-overflow-tooltip
          align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isDisplayLimit === 'ID_BT_True'" class="block_label_color mini_label yes_state">
              是
            </span>
            <span v-else-if="scope.row.isDisplayLimit === 'ID_BT_False'" class="block_label_color mini_label no_state">
              否
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="creatorName"
          label="创建人"
          min-width="80"
          show-overflow-tooltip
          align="center">
        </el-table-column>
        <el-table-column
          prop="templateCreateDate"
          label="创建时间"
          min-width="140"
          show-overflow-tooltip
          align="center">
        </el-table-column>
        <el-table-column
          prop="templateUpdateDate"
          :resizable="false"
          label="最后修改时间"
          min-width="140 "
          show-overflow-tooltip
          align="center">
        </el-table-column>
      </el-table>
    </div>
    <mes-pagination
      @updateData="init"
      :currentPage="listData.pageNo"
      :total="listData.count || 0"
      :pageSize="listData.pageSize">
    </mes-pagination>
    <process-template ref="ProcessTemplate"></process-template>
  </div>
</template>

<script>
import {ProcessTemplate} from '../../../../components/Template'

export default {
  name: 'ProcessTemplateD',
  components: {
    ProcessTemplate
  },
  data() {
    return {
      isLoading: true, // 数据加载中
      searchParams: {}, // 查询参数
      sortOrder: {}, // 排序对象
      selectItems: [], // 选中的数据
      searchResult: NaN, // 搜索结果数
    }
  },
  mounted() {
    this.init()
  },
  computed: {
    // 列表数据
    listData() {
      return this.$store.state.processTemplate.listData
    },
    // 搜索项
    searchList() {
      return [
        {
          label: '模板名称',
          value: '',
          name: 'name',
          type: 'input'
        },
        {
          label: '物料名称',
          value: '',
          name: 'materialName',
          type: 'input'
        },
        {
          label: '工序名称',
          value: '',
          name: 'workstageName',
          type: 'input',
        },
        {
          label: '工序序号',
          value: '',
          name: 'sort',
          type: 'input',
        },
        {
          label: '显示上下限',
          value: '',
          name: 'isDisplayLimit',
          type: 'select',
          dictType: 'booleanType'
        },
        {
          label: '创建人',
          value: '',
          name: 'creatorName',
          type: 'input'
        },
        {
          label: '创建时间',
          value: '',
          name: 'templateCreateDate',
          type: 'date'
        },
        {
          label: '最后修改时间',
          value: '',
          name: 'templateUpdateDate',
          type: 'date'
        }
      ]
    }
  },
  methods: {
    // 初始化方法
    init(page) {
      this.isLoading = true
      let pageObj = page || {
        pageNo: 1,
        pageSize: 15
      }
      let postData = {
        method: 'post',
        url: 'a/workstagerecordtemplate/workstageRecordTemplate/list',
        data: {
          pageNo: pageObj.pageNo,
          pageSize: pageObj.pageSize,
        },
        module: 'processTemplate',
        state: 'listData'
      }
      if (Object.keys(this.searchParams).length > 0) {
        postData.data.query = this.searchParams
      }
      if (Object.keys(this.sortOrder).length > 0) {
        postData.data.sort = this.sortOrder
      }
      this.$store.dispatch('saveData', postData).then((res) => {
        if (Object.keys(this.searchParams).length > 0) {
          this.searchResult = res.count
        } else {
          this.searchResult = NaN
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 添加方法
    handleAdd() {
      this.$refs.ProcessTemplate.openDialog()
    },
    // 显示删除弹框
    showDeleteDialog() {
      if (this.selectItems.length > 0) {
        this.confirmDelete().then(() => {
          this.handleDelete()
        })
      } else {
        this.$message({
          type: 'error',
          message: '未选中任何数据',
          duration: 1500,
          center: true
        })
      }
    },
    // 删除方法
    handleDelete() {
      let postData = {
        method: 'post',
        url: 'a/workstagerecordtemplate/workstageRecordTemplate/deleteBatch',
        module: 'processTemplateDetail',
        data: {
          workstageRecordTemplateList: this.selectItems
        },
        noCommit: true
      }
      this.$store.dispatch('saveData', postData).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功',
          duration: 1500,
          center: true
        })
        this.init(this.listData)
      })
    },
    // 编辑方法
    handleEdit() {
      this.selectItems.length === 1 ? this.$refs.ProcessTemplate.openDialog(this.selectItems[0].id) : this.$message({
        type: 'error',
        message: '请选择一条数据',
        duration: 1500,
        center: true
      })
    },
    // 搜索方法
    search(params) {
      this.searchParams = params
      this.init()
    },
    // 刷新方法
    refresh() {
      this.searchParams = {} // 查询参数
      this.sortOrder = {} // 排序对象
      this.$refs.mesSearch.clean()
      this.$refs.tableNode.clearSort()
      this.init()
    },
    // 排序方法
    handleSortChange(item) {
      this.sortOrder = this.$getSortOrder(item)
      this.init()
    },
    // 选中方法
    handleSelectionChange(val) {
      this.selectItems = val
    }
  }
}
</script>

<style lang="less" scoped>

</style>
